<template>
  <div class="page-binduser">
    <pk-dialog style="width: 700px;" @confirm="confirm" @onClose="onClose" :loading="loading" title="添加被考评人员">
      <div class="page-binduser-body mt-12">
       <div>
        <div v-if="inputVisible" class="flex-row mt-12">
          <div>
            <el-input 
              ref="InputRef"
              v-model="inputValue"
              style="width:160px"
              placeholder="请输入被考评人员姓名"
            />
          </div>
          <div class="ml-4">
            <el-button @click="closeData" type="danger">取消</el-button>
          </div>
          <div class="ml-4">
            <el-button @click="saveData" type="primary">保存</el-button>
          </div> 
        </div>
        <div class="mt-12" v-else>
          <el-button :icon="Plus" @click="showInput">添加</el-button>
        </div>
       </div>
       <div class="flex-row flex-wrap">
        <div v-for="(tag, index) in tagsList"  :key="tag" class="mr-12 mt-12">
          <el-tag
              closable
              round
              size="large"
              :disable-transitions="false"
              @close="handleClose(index)"
            >
              {{ tag.username }}
            </el-tag>
          </div>
        </div>

      </div>
    </pk-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { Toast } from '@/utils/utils'
import { userList, dutiesGetNoBindJudges, dutiesBindJudges } from '@/api/api'
import pkDialog from '@/components/pkui/pk-dialog/pk-dialog.vue'
import { Plus } from '@element-plus/icons-vue'
const emits = defineEmits(['onClose', 'cancel', 'confirm'])
const InputRef = ref('')
const value = ref([])
const inputValue = ref('')
const data = ref([])
const props = defineProps({
  curData: {
    type: Object,
    default: () => {}
  },
  list: {
    type: Array,
    default: () => []
  }
})
const inputVisible = ref(false)
const tagsList = ref([])
const loading = ref(false)


const showInput = () => {
  inputVisible.value = true
  // nextTick(() => {
  //   InputRef.value!.input!.focus()
  // })
}

const handleClose = (index) => {
  tagsList.value.splice(index, 1)
}

const confirm = () => {
  if (tagsList.value.length < 1) {
    Toast('绑定被考评人员数量至少选择一个')
    return
  }
  emits('confirm', getUserInfo())
}

const getUserInfo = () => {
  let list = tagsList.value
  return list
}

const onClose = () => {
  emits('onClose')
} 

const handleChange = (e) => {
  console.log('---------handleChange----------', e)
}

const closeData = () => {
  inputValue.value = ''
  inputVisible.value = false
}
const saveData = (e) => {
  if (!inputValue.value) {
    Toast('名称没有填写')
    return
  }
  const finddata = tagsList.value.find(a => a == inputValue.value)
  if (finddata) {
    Toast(`填写名称【${inputValue.value}】已存在`)
    return
  }
  tagsList.value.push({
    username: inputValue.value
  })
  inputValue.value = ''
  inputVisible.value = false
}

// 查询未绑定级别评委列表
const getNoBindJudges = () => {
  userList({
    status: 1,
  }).then(res => {
    data.value = res.resData.map(item => {
      return {
        label: item.username,
        desc: item.username,
        key: item.id,
        value: item.phone
      }
    })
  })
}

onMounted(() => {
  getNoBindJudges()
})
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
  font-size: 12px;
}
</style>